<%--
  User: LiXiaobo  Date: 2020/12/2 Time: 上午10:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<!DOCTYPE html>
<html>
<head>
    <title>角色管理</title>
    <base href="<%=request.getContextPath()%>/"/>
    <link rel="stylesheet" href="webjars/layui/2.5.5/css/layui.css">
</head>
<body>

<div class="layui-container">
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add" onclick="add()">添加角色</button>
            <button class="layui-btn layui-btn-sm" lay-event="grant" onclick="grant()">角色授权</button>
        </div>
    </script>
    <table id="roleTb" lay-filter="roleTb"></table>
    <script type="text/html" id="action">
        <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
<div style="display: none" id="update">
    <form class="layui-form" lay-filter="update" style="padding:30px">
        <input type="hidden" name="id"/>
        <div class="layui-form-item">
            <label class="layui-form-label">角色代号</label>
            <div class="layui-input-block">
                <input type="text" name="roleCode"   class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName"   class="layui-input">
            </div>
        </div>
    </form>
</div>
<div style="display: none" id="add">
    <form class="layui-form" lay-filter="add" style="padding:30px">
        <div class="layui-form-item">
            <label class="layui-form-label">角色代号</label>
            <div class="layui-input-block">
                <input type="text" name="roleCode"   class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName"   class="layui-input">
            </div>
        </div>
    </form>
</div>
<div id="tree" style="display:none;margin-left:50px;height:300px"></div>
<script src="webjars/layui/2.5.5/layui.js"></script>
<script>
    //表格初始化
    layui.use(["table"],function(){
        let table=layui.table;
        table.render({
            id:"roleTb",
            elem:"#roleTb",
            url:"sys/role/search",
            toolbar:"#toolbar",
            cols:[[
                {type:"radio"},
                {title:"角色代号",field:"roleCode"},
                {title:"角色名称",field:"roleName"},
                {title:"创建时间",field:"creationDate"},
                {title:"操作",toolbar:"#action"}
            ]]
        });
        table.on("tool(roleTb)",function({data,event}){
            switch (event){
                case "update":
                    update(data);
                    break;
                case "del":
                    del(data.id);
                    break;
            }
        });
    });

    //修改
    function update(data){
        layui.use(["layer","jquery","form","table"],function(){
            let layer=layui.layer;
            let $=layui.$;
            layui.form.val("update",data);
            layer.open({
                type:1,
                offset:'50px',
                skin:'layui-layer-molv',
                area:["500px"],
                content:$("#update"),
                btn:["确定","取消"],
                yes(){
                    let params=layui.form.val("update");
                    $.post("sys/role/update",params)
                     .done(({msg})=>{
                         layui.table.reload("roleTb");
                         layer.close(layer.index);
                         layer.msg(msg);
                     });
                }
            });
        });
    }

    function add(){
        layui.use(["layer","jquery","form","table"],function(){
            let layer=layui.layer;
            let $=layui.$;
            $("#add>form")[0].reset();
            layer.open({
                type:1,
                offset:'50px',
                skin:'layui-layer-molv',
                area:["500px"],
                content:$("#add"),
                btn:["确定","取消"],
                yes(){
                    let params=layui.form.val("add");
                    $.post("sys/role/add",params)
                        .done(({msg})=>{
                            layui.table.reload("roleTb");
                            layer.close(layer.index);
                            layer.msg(msg);
                        });
                }
            });
        });
    }

    function del(id){
        layui.use("jquery",function(){
            layui.$.get(`sys/role/del/${id}`)
                  .done(({msg})=>{
                      layui.table.reload("roleTb");
                      layer.msg(msg);
                  });
        });
    }

    function grant(){
        layui.use(["layer","table","tree","jquery"],function(){
            let layer=layui.layer;
            let table=layui.table;
            let tree=layui.tree;
            let arr=table.checkStatus("roleTb").data;
            if(arr.length==0){
                layer.alert("请选择一项待授权!");
                return;
            }
            let roleId=arr[0].id;
            layui.$.get(`sys/role/searchTreeData/${arr[0].id}`)
             .done(({data})=>{
                    tree.render({
                        id:"tree",
                        elem:"#tree",
                        showCheckbox:true,
                        data
                    });
                   layer.open({
                       type:1,
                       offset:'50px',
                       skin:'layui-layer-molv',
                       area:["500px"],
                       content:layui.$("#tree"),
                       btn:["确定","取消"],
                       yes(){
                           let ids=[];
                           let nodes=tree.getChecked("tree");
                         //  console.log(nodes);
                          // let ids= nodes.map(node=>node.id);
                            for(node of nodes){
                                ids.push(node.id)
                                if(node.children.length>0){
                                    for(node2 of node.children){
                                        ids.push(node2.id);
                                        if(node2.children.length>0){
                                            for(node3 of node2.children){
                                                ids.push(node3.id);
                                            }
                                        }
                                    }
                                }
                            }
                          console.log(ids);
                           layui.$.post('sys/role/grant',`roleId=${roleId}&ids=${ids}`)
                                  .done(({msg})=>{
                                      layer.close(layer.index);
                                      layer.msg(msg);
                                  });
                       }
                   });
             });

        });
    }
</script>
</body>
</html>
